import React, { Component } from "react";
import { NoticeBar } from "antd-mobile";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";
import iconPayFail from "@/images/pay_fail.png";
import iconTips from "@/images/icon-tips2.png";
import yhTools from "@tools/yh";

import "./shopPayFail.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2021-01-14
 */
class shopPayFail extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {};
	componentWillUnmount = () => {};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { query = {} } = this.props.location;

		const { payResult = {} } = query;
		const { message = "" } = payResult;
		const _pageParams = {
			header: {
				title: "支付结果",
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="shopPayFail">
					<NoticeBar
						mode=""
						icon={<img className="icon_notice" src={iconTips} alt="" />}
					>
						支付遇到问题？请拨打客服热线 400-690-6663
					</NoticeBar>
					<div className="fail_wrapper">
						<img src={iconPayFail} alt="" />
						<h3>付款失败</h3>
						<p>原因：{message}</p>
					</div>
					<Button
						onClick={() => {
							yhTools.closePage();
						}}
					>
						返回
					</Button>
				</div>
			</MainLayout>
		);
	}
}

export default shopPayFail;
